<div class="container">
  <div class="inner">
    <div class="header capital-letters" style="background-color: #2c3057;color:#7C84BB">
      {{'Data_Visualization.TrafficAnalytics.'+ titletext | translate}}
    </div>
    <!--<div class="tableContainer">
      <div *ngFor="let item of data" class="tableTr">
        <div>{{item.name}}</div>
        <div>{{item.value}}km/h</div>
      </div>
    </div>-->
    <div class="echarts">
      <div style="height: 40px;width: 100%" class="flex flex-items-center">
        <div class="flex flex-justify-center" style="width: 60%;margin: 0 auto">
          <div class="flex flex-items-center" style="margin-right: 20px">
            <div class="legend-label congestion"></div>
            <div class="legend-content">The Most Congestion</div>
          </div>
          <div class="flex flex-items-center">
            <div class="legend-label smooth"></div>
            <div class="legend-content">The Most Smooth</div>
          </div>
        </div>
      </div>
      <div echarts [options]="options" style="height: calc(100% - 40px)" [autoResize]="true"></div>
    </div>
  </div>
</div>
